import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 导入ngForm模块
import { FormsModule } from '@angular/forms';

// 导入路由模块
import { RouterModule, Routes } from '@angular/router';

// 导入组件
import { AppComponent } from './app.component';
import { LoginComponent } from '../components/login/login.component';
import { RegComponent } from '../components/reg/reg.component';
import { LayoutComponent } from '../components/layout/layout.component';
import { TagListComponent } from '../components/tag-list/tag-list.component';
import { ContactListComponent } from '../components/contact-list/contact-list.component';
import { ContactEditComponent } from '../components/contact-edit/contact-edit.component';
import { PageNotFoundComponent } from '../components/page-not-found/page-not-found.component';
import { TagEditComponent } from '../components/tag-edit/tag-edit.component';
import { TagAddComponent } from '../components/tag-add/tag-add.component';
import { ContactAddComponent } from '../components/contact-add/contact-add.component';
import { TagPipe } from './pipe/tag.pipe';
import { OrderByPipe } from './pipe/order-by.pipe';
import { FilterPipe } from './pipe/filter.pipe';


// 配置路由规则
const router: Routes = [
  {
    path: '',
    redirectTo: 'contactlist',
    // 路由重定向, 一定要启用,路由绝对匹配
    pathMatch: 'full'
  },
  {
    // path不能带`/`
    path: 'login',
    component: LoginComponent,
    data: {
      title: '登录'
    }
  },
  {
    path: 'reg',
    component: RegComponent,
    data: {
      title: '注册'
    }
  },
  // 嵌套路由
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: 'taglist',
        component: TagListComponent,
        data: {
          title: ' 标签列表'
        }
      },
      {
        path: 'tagedit',
        component: TagEditComponent,
        data: {
          title: ' 编辑标签'
        }
      },
      {
        path: 'tagadd',
        component: TagAddComponent,
        data: {
          title: ' 新增标签'
        }
      },
      {
        path: 'contactlist',
        component: ContactListComponent
      },
      {
        path: 'contactedit/:id',
        component: ContactEditComponent,
        data: {
          title: '编辑联系人'
        }
      },
      {
        path: 'contactadd',
        component: ContactAddComponent,
        data: {
          title: '新增联系人'
        }
      }
    ]
  },
  // 通配符路由
  // { path: '**', component: PageNotFoundComponent }
]


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegComponent,
    LayoutComponent,
    TagListComponent,
    ContactListComponent,
    ContactEditComponent,
    PageNotFoundComponent,
    TagEditComponent,
    TagAddComponent,
    ContactAddComponent,
    TagPipe,
    OrderByPipe,
    FilterPipe,
  ],
  imports: [
    BrowserModule,
    // 挂载路由模块
    RouterModule.forRoot(router),
    // 注册表单处理模块
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(){
  }

}
